<template>
  <div class="centerContent">
    <div class="centerhead" >
        <div class="centerImg">
          <div class="centerImgIcon" v-if="minfo.img">
            <img :src="minfo.img?minfo.img:mrImg"/>
          </div>
        </div>
        <div class="centerInfo">
          <h3>{{minfo.userName}}</h3>
          <p>{{minfo.phone}}</p>
        </div>
    </div>
    <div class="mineshort">
      <ul>
        <li @click="goDetail('center','companyinfo')">
          <img src="./imgs/1.shxx.png"/>
          <p>商户信息</p>
        </li>
        <li  @click="goDetail('center','bankCard')">
          <img src="./imgs/2.yhk.png"/>
          <p>银行卡</p>
        </li>
        <li @click="goDetail('center','carInfos')">
          <img src="./imgs/3.clxx.png"/>
          <p>车辆信息</p>
        </li>
        <li @click="goDetail('center','rentInvoice')">
          <img src="./imgs/4.fpxx.png"/>
          <p>我的发票</p>
        </li>
      </ul>
    </div>
    <div class="mineMenu">
      <ul>
        <li @click="goDetail('center','question')">
          <div class="mIcon"><div class="mIconImg"><img src="./imgs/item1.icon.png"/> </div></div>
          <div class="mRow">常见问题</div>
          <div class="mArrow"><i class="ria el-icon-arrow-right"></i> </div>
        </li>
        <li  @click="goDetail('personCar','yxc_pro')">
          <div class="mIcon"><div class="mIconImg"><img src="./imgs/item2.icon.png"/></div></div>
          <div class="mRow">关于优享车</div>
          <div class="mArrow"><i class="ria el-icon-arrow-right"></i> </div>
        </li>
        <li  @click="goDetail('center','contractUs')">
          <div class="mIcon"><div class="mIconImg"><img src="./imgs/item3.icon.png"/></div></div>
          <div class="mRow">联系我们</div>
          <div class="mArrow"><i class="ria el-icon-arrow-right"></i> </div>
        </li>
      </ul>
    </div>
    <div class="mineMenu">
      <ul>
        <li @click="quickout()">
          <div class="mIcon"><div class="mIconImg"><img src="./imgs/item4.icon.png"/> </div></div>
          <div class="mRow">退出登录</div>
          <div class="mArrow"></div>
        </li>
      </ul>
    </div>
    <!--<button @click="democlick()">弹出</button>-->
    <mnav cur="3"></mnav>
  </div>
</template>

<script>

  export default {
    name: 'company-bill',
    data () {
      return {
        mrImg:require('./imgs/mhead.jpg'),
        minfo:{}
      }
    },
    created () {
      this.getmineInfo();
    },
    methods: {
      democlick(){
        this.$iconToast({
          message:'添加失败',
          type:'error'
        })
      },
      getmineInfo(){
        this.$http.get('yxc/wxuser/get').then(res=>{
          if(res.code == 200){
              this.minfo = res.data
          }else{
            this.$toast(res.message);
          }
        })
      },
      goDetail(path,funCode){
        this.$router.push({
          path:'/'+path,
          query:{
            funCode:funCode
          }
        })
      },
      quickout(){
        this.$mPromot({
          width: '80%',
          title: '提示',
          funCode: 'comfims',
          props: {
            btn2:'确定',
            type:'confirm',
            info: '确定退出吗？'
          },
          callback: (close,str) => {
          if(str){
            localStorage.removeItem('wxUserId')
            this.$router.replace({
              path:'/personCar',
              query:{
                funCode:'carLogin'
              }
            })
          }
          close();
      }
      })

      }
    },

  }
</script>

<style lang="scss" scoped>
  .centerContent{
    padding-bottom: 50px;
  }
  .centerhead{
    height:150px;
    background:rgba(28,103,255,1);
    display: flex;
    padding:30px 15px;

    box-sizing: border-box; //相当于IE6盒模型
    .centerImg{
      .centerImgIcon{
        width:60px; height:60px; overflow: hidden;
        border-radius: 1000px;
        background: red;
        img{width:100%;}
      }
    }
    .centerInfo{
      color:#FFF;
      padding:5px 10px;

      p,h3{
        margin:0;padding:0;
      }
    }
  }
  .mineshort{
    margin:15px;
    background:rgba(255,255,255,1);
    box-shadow:0px 6px 25px 2px rgba(232,232,232,0.4);
    border-radius:5px;
    position: relative;
    margin-top:-40px;
    height: 80px;
    box-sizing: border-box;
    padding-top:5px;

    ul{
      display: flex;
      li{
        text-align: center;
        width:25%;
        font-size:14px;
        p{margin:0;padding:0; color:#333;}
        img{width:40px; position: relative; top:5px;}
      }
    }
  }
  .mineMenu{
    overflow: hidden;
    background: #FFF;
    border-radius:5px;
    background: #FFF;
    margin:15px;
    ul{
       font-size:14px;
      color:#333;
      li{
        display: flex;
        padding:0px 0 0 15px;
        .mIcon{
          .mIconImg{width:18px; height:18px; img{width:100%; position: relative; top:16px;}}
        }
        .mRow{
          width:100%;
          border-bottom: 1px solid rgba(238,238,238,1);
          padding:15px 5px;
        }
        .mArrow{
          width:30px;
          border-bottom: 1px solid rgba(238,238,238,1);
          .ria{
            font-size:20px;
            position: relative;top:14px;color:#CCC;

          }
        }
      }
      li:last-child{
         .mRow{ border:none;}
         .mArrow{ border:none;}
      }
    }
  }
  </style>
